<template>
	<s-layout title="" backgroundColor="#000" opacityBgUi="bg-get">
		<view class="top" >
			待领取
		</view>
		<view class="main">
			<view class="main-top">
				<view class="gradient">
				</view>
				<view class="item">
					<view class="flex " style="align-items: center;margin-bottom: 30rpx;">
						<image class="avatar" :src="sheep.$url.cdn(state.shareInfo.image)" mode=""></image>
						<view class="" style="padding-left: 42rpx;flex: 1;">
							<view class="wine-title">{{state.shareInfo.goods_name}}</view>
							<view class="flex wine">
								<view class="price">￥{{state.shareInfo.price}}</view>
								<view class="num">×{{state.shareInfo.share_num}}</view>
							</view>
						</view>
					</view>
					<view class="des">
						你的好友{{state.shareInfo.user}}向你分享了{{state.shareInfo.goods_name}}{{state.shareInfo.share_num}}瓶
					</view>
					<view class="des">
						分享时间：{{state.shareInfo.date}}
					</view>
				</view>
			</view>
			<view class="give" @click="getWines">
				立即领取
			</view>
		</view>

		<su-popup :show="showFinsh" type="center" round="10" :isMaskClick="false" showClose>
			<view class="model-box ss-flex-col">
				<view class="ss-m-t-20 ss-flex-col ss-col-center">
					<text class="cicon-check-round"></text>
				</view>
				<view class="model-bg ss-flex-col ss-col-center ss-row-right">
					<view class="title ss-m-b-32">领取成功</view>
					<view>可在“我的酒库”查询详情 </view>
					<view class="ss-m-b-50">领取或赠送</view>
					<view class="ss-m-b-40">
						<button class="ss-reset-button confirm-btn" @tap="onConfirm">确定</button>
					</view>
				</view>
			</view>
		</su-popup>

		<su-dialog :content="state.content" @confirm="confirm" @close="show=false" :show="show"
			title="温馨提示"></su-dialog>
	</s-layout>
</template>
<script setup>
	import {
		computed,
		reactive,
		ref
	} from 'vue';
	import {
		onLoad,
	} from '@dcloudio/uni-app';
	import sheep from '@/sheep';
	const sysStore = sheep.$store('sys');
	const sys = computed(() => sysStore);

	const show = ref(false)
	const showFinsh = ref(false)

	const state = reactive({
		shareInfo: {},
		content: ''
	})

	const getWines = () => {
		state.content = `是否立即领取你的好友${state.shareInfo.user}分享你的${state.shareInfo.goods_name}`
		show.value = true
	}
	const confirm = () => {
		sheep.$api.second.getShareWines({
			share_tmp_id: state.shareInfo.share_tmp_id,
		}).then((res) => {
			if (res.code == 1) {
				show.value=false
				showFinsh.value = true
			}
		})
	}

	const onConfirm = () => {
		sheep.$router.go('/pages/index/user')
	}

	const getDetail = (wines_id, share_num, date) => {
		sheep.$api.second.getShareInfo({
			wines_id,
			share_num,
			share_time:date
		}).then(res => {
			const {
				data: {
					shareInfo
				}
			} = res
			state.shareInfo = shareInfo
			state.shareInfo.date = date
		})
	}
	onLoad(({
		wines_id,
		share_num,
		date
	}) => {
		getDetail(wines_id, share_num, decodeURIComponent(date))
	});
</script>
<style lang="scss" scoped>
	.top {
		width: 100%;
		height: 148rpx;
		background-color: #000;
		font-size: 36rpx;
		color: #FFAA08;
		padding-left: 86rpx;
		padding-top: 30rpx;
		// background-color: red;
	}

	.main {
		margin-top: -46rpx;
		padding: 0 36rpx;

		.give {
			margin-top: 60rpx;
			font-size: 36rpx;
			color: #FFAA08;
			line-height: 96rpx;
			width: 680rpx;
			height: 96rpx;
			background: #000000;
			border-radius: 10rpx 10rpx 10rpx 10rpx;
			text-align: center;
		}

		.main-top {
			padding: 0;
			background: #fff;
			border-radius: 6rpx 6rpx 6rpx 6rpx;
			background-color: #fff;

			.gradient {
				width: 100%;
				height: 40rpx;
				background: linear-gradient(180deg, #494949 0%, rgba(216, 216, 216, 0) 100%);
			}

			.item {
				padding: 24rpx 50rpx 44rpx;

				.wine {
					justify-content: space-between;
					align-items: center;
					padding-top: 18rpx;
				}

				.wine-title {
					font-size: 32rpx;
					color: #000000;
				}

				.price {
					font-size: 28rpx;
					color: #E10000;
				}

				.num {
					font-size: 24rpx;
					color: #9B9B9B;
				}

				.avatar {
					width: 120rpx;
					height: 120rpx;
					background: #D8D8D8;
				}

				.des {
					font-weight: 400;
					font-size: 24rpx;
					color: #909090;
					margin-top: 14rpx;
				}
			}
		}



	}

	.model-box {
		width: 520rpx;
		// height: 590rpx;
		background: #fff;
		// background: linear-gradient(177deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
		border-radius: 16rpx;

		.cicon-check-round {
			font-size: 70rpx;
			color: #FFAA08;
		}

		.score-title {
			font-size: 34rpx;
			font-family: OPPOSANS;
			font-weight: 500;
			color: #fcff00;
		}

		.model-title {
			font-size: 28rpx;
			font-weight: 500;
			color: #ffffff;
		}

		.model-bg {
			width: 520rpx;

			background-size: 100% 100%;
			background-image: v-bind(headerBg);
			background-repeat: no-repeat;
			border-radius: 0 0 10rpx 10rpx;

			.title {
				font-weight: bold;
				// color: var(--ui-BG-Main);
				font-size: 24rpx;
				color: #3D3D3D;
				margin-top: 20rpx;
			}

			.subtitle {
				font-size: 26rpx;
				font-weight: 500;
				color: #999999;
			}

			.cancel-btn {
				width: 220rpx;
				height: 70rpx;
				border: 2rpx solid #ff6000;
				border-radius: 35rpx;
				font-size: 28rpx;
				font-weight: 500;
				color: #ff6000;
				line-height: normal;
				margin-right: 10rpx;
			}

			.confirm-btn {
				width: 114rpx;
				height: 54rpx;
				line-height: 54rpx;
				text-align: center;
				font-size: 24rpx;
				color: #3D3D3D;
				background: #FFFFFF;
				border-radius: 10rpx 10rpx 10rpx 10rpx;
				border: 2rpx solid #B8B8B8;
			}
		}
	}
</style>